<template>
	<view class="content">
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :current="current" :dots-styles="dotsStyles"
			field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" indicator-dots='true'>
				<swiper-item v-for="(item, index) in swiperArr" :key="index">
					<!-- <view class="swiper-item" :class="'swiper-item' + index">
						<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
					</view> -->
					<image :src="item.url" alt="" mode="scaleToFill" style="width: 100%;" />
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<view class="groupList">
			<view class="groupItem" v-for="(item,index) in groupListItem">
				<image :src="item.url" alt="" mode="scaleToFill" style="width: 100%;height: 100px;" />
				<p class="groupItemName">{{item.name}}</p>
				<p class="groupItemPeopel">{{item.peopel}}人团</p>
				<p class="groupItemTime">距离结束：{{item.time}}</p>
				<p class="groupItemBuy">已成团{{item.buy}}人</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperArr: [{
					url: 'https://img1.baidu.com/it/u=722430420,1974228945&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
					text: " 文案1"
				}, {
					url: 'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
					text: "文案2"
				}, {
					url: 'https://img0.baidu.com/it/u=512340543,3139277133&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
					text: "文案3"
				}, ],
				swiperDotIndex: 0,
				groupListItem: [{
						url: 'https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
						name: '全品物3D墙贴电视沙发背景',
						peopel: 3,
						time: '12:23:46',
						buy: 12
					},
					{
						url: 'https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
						name: '全品物3D墙贴电视沙发背景',
						peopel: 4,
						time: '12:23:46',
						buy: 50
					},
					{
						url: 'https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
						name: '全品物3D墙贴电视沙发背景',
						peopel: 4,
						time: '12:23:46',
						buy: 50
					},
					{
						url: 'https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
						name: '全品物3D墙贴电视沙发背景',
						peopel: 4,
						time: '12:23:46',
						buy: 50
					}
				]
			}
		}
	}
</script>

<style>
	.groupList {
		width: 100%;
		margin-top: 10px;
		padding: 10px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.groupItem {
		width: 48%;
		height: 220px;
		border-radius: 10px;
		background: #FFFFFF;
		box-shadow: 0px 0px 3px #888888;
		margin-top: 10px;
	}

	.groupItemName {
		margin-left: 8px;
		font-weight: 600;
		font-size: 14px;
		color: gray;
	}

	.groupItemPeopel {
		margin-left: 8px;
		font-weight: 100;
		font-size: 12px;
		margin-top: 4px;
	}

	.groupItemTime {
		margin-left: 8px;
		color: red;
		margin-top: 4px;
	}

	.groupItemBuy {
		margin-left: 8px;
		margin-top: 10px;
		color: gray;
	}
</style>
